<!--
@description：保存菜品
@author: whw
@date: 2021/6/24
-->
<template>
  <el-dialog
    :title="(foodId?'编辑菜品 - ':'新增菜品 - ') + selectedStore.storeName"
    :visible.sync="saveFoodVisible"
    width="30%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="closeDialog"
  >
    <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item
        label="菜品名称"
        prop="foodName"
        :rules="{ required: true, message: '请输入菜品名称' }"
      >
        <el-input v-model="formData.foodName" />
      </el-form-item>
      <el-form-item label="单价">
        <el-input-number v-model="formData.price" :min="0.1" :precision="2" label="单价" />
      </el-form-item>
      <el-form-item label="菜品描述">
        <el-input v-model="formData.remark" @keydown.enter.native="save" />
      </el-form-item>
      <el-form-item
        prop="spicy"
        label="菜品辣度"
      >
        <el-rate
          v-model="formData.spicy"
          :max="3"
          :texts="texts"
          :low-threshold="1"
          :high-threshold="2"
          show-text
          void-icon-class="iconfont icon-lajiao"
          :icon-classes="iconClasses"
          :colors="['black','red','red']"
        />
      </el-form-item>

      <!--      <el-form-item label="菜品图片 (jpg,png)">-->
      <!--        <el-upload-->
      <!--          ref="avatarUpload"-->
      <!--          class="avatar-uploader"-->
      <!--          action="http://localhost:32011/food/saveImg"-->
      <!--          :headers="headers"-->
      <!--          accept="image/png, image/jpeg"-->
      <!--          :data="imgData"-->
      <!--          :show-file-list="false"-->
      <!--          :auto-upload="false"-->
      <!--          :on-change="handleChange"-->
      <!--          :on-success="handleAvatarSuccess"-->
      <!--        >-->
      <!--          <img v-if="imageSrc" :src="imageSrc" class="avatar">-->
      <!--          <i v-else class="el-icon-plus avatar-uploader-icon" />-->
      <!--        </el-upload>-->
      <!--      </el-form-item>-->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { save, getDetail } from '@/api/basic/food'
// import { getToken } from '@/utils/auth'

export default {
  name: 'SaveFood',
  props: {
    saveFoodVisible: {
      type: Boolean,
      default: false
    },
    foodId: {
      type: String,
      default: null
    },
    selectedStore: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formData: {
        foodName: null,
        storeId: null,
        price: 15,
        remark: null,
        spicy: 1
        // // 接收的时候使用
        // img: null
      },
      texts: ['不辣', '微辣', '重辣'],
      iconClasses: ['iconfont icon-lajiao', 'iconfont icon-lajiao', 'iconfont icon-lajiao'],
      // // 图片上传参数
      // imgData: {
      //   foodId: null
      // },
      // imageSrc: null,
      // // 请求头
      // headers: {
      //   token: null
      // },
      // 表单验证
      rules: {
        foodName: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.foodId) {
      // 如果foodId有值，就查询详情
      this.getDetail()
    }
    // this.setHeaderToken()
  },
  methods: {
    // // 图片上传
    // handleChange(file) {
    //   const isLt2M = file.size / 1024 / 1024 < 1
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 1MB!')
    //     return
    //   }
    //   this.imageSrc = URL.createObjectURL(file.raw)
    // },
    // 图片保存
    // handleAvatarSuccess(res, file) {
    //   if (res.code !== 200) {
    //     this.$notify({
    //       title: '失败',
    //       message: '头像保存失败',
    //       type: 'error'
    //     })
    //   }
    // },
    // 设置请求头
    // setHeaderToken() {
    //   this.headers.token = getToken()
    // },
    // 关闭弹窗
    closeDialog(isRefresh) {
      this.formData = null
      this.$emit('close', isRefresh)
    },
    // 保存
    save() {
      this.formData.storeId = this.selectedStore.storeId
      save(this.formData).then(res => {
        // if (!this.imgData.foodId) {
        //   // 新增和更改都返回一个foodId,给图片保存使用
        //   this.imgData.foodId = res.data
        // }
        // 保存头像
        // this.$refs.avatarUpload.submit()

        if (res.code === 200) {
          this.$message.success('保存成功!')
          this.closeDialog(true)
        }
      })
    },
    // 获取详情
    getDetail() {
      getDetail({ foodId: this.foodId }).then(res => {
        if (res.code === 200) {
          this.formData = res.data
        }
        // if (this.formData.imgVO) {
        //   this.imageSrc = 'data:image/jpeg;base64,' + this.formData.imgVO
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
/deep/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
